<template>
  <ElButton type="primary" @click="openDialog('add')"> 添加 </ElButton>
  <Table :options="tableOption" :data="dataList" />
  <ElDialog v-model="dialogFlag" :title="dialogTitle">
    <Detail v-if="detailFlag" :option="detailOption" :data="curronRow" />
    <Form v-else :option="formOption" @model="register" />

    <template #footer>
      <div v-if="detailFlag">
        <ElButton type="primary" @click="dialogFlag = false">确定 </ElButton>
      </div>
      <div v-else>
        <ElButton type="primary" @click="save">{{ dialogTitle }}</ElButton>
        <ElButton type="danger" @click="dialogFlag = false">取消 </ElButton>
      </div>
    </template>
  </ElDialog>
</template>
<script setup lang="jsx">
import Table from "../../../components/Table/index.vue";
import Form from "../../../components/Form/index.vue";
import { useForm } from "../../../hooks/useForm";
const { register, FormParams } = useForm();
import { useCURD } from "../../../hooks/useCURD";
import Detail from "../../../components/Form/Detail.vue";
const {
  getList,
  dataList,
  delRow,
  page,
  tableOption,
  formOption,
  detailOption,
  sumOption,
} = useCURD();
import { ref } from "vue";
import { ElButton, ElDialog, ElMessage, ElMessageBox } from "element-plus";
import { getuser, adduser, edituser, deluser } from "../../../api/user";
sumOption.value = [
  {
    field: "id",
    label: "序号",
    table: {
      width: "80px",
    },
    form: {
      hidden: true,
    }
  },

  {
    field: "username",
    label: "用户名",
    table: {},
    form: {
      value: "",
      component: "input",
    },
     
  },
  {
    field: "password",
    label: "密码",
    table: {
      hidden: true,
    },
    form: {
      value: "",
      component: "password",
    },
  },
  {
    field: "custom",
    label: "操作",
    table: {
      slots: (obj) => {
        return (
          <>
            <ElButton type="primary" onClick={() => openDialog(obj.row)}>
              修改
            </ElButton>
            <ElButton
              type="danger"
              onClick={() => delRow(() => deluser(obj.row.id))}
            >
              删除
            </ElButton>
            <ElButton type="success" onClick={() => showDetail(obj.row)}>
              查看
            </ElButton>
          </>
        );
      },
    },
    form: {
      hidden: true,
    },
    detail:{
        hidden: true,
    }
  },
];
getList(async () => {
  let res = await getuser();
  return { list: res.data, totle: res.data.length };
});
const dialogFlag = ref(false);
const dialogTitle = ref("");
function openDialog(title) {
  if (title === "add") {
    dialogTitle.value = "添加";
    sumOption.value[1].form.value = "";
    sumOption.value[2].form.value = "";
  } else {
    dialogTitle.value = "修改";
    sumOption.value[0].form.value = title.id;
    sumOption.value[1].form.value = title.username;
    sumOption.value[2].form.value = title.password;
  }
  dialogFlag.value = true;
}
function save() {
  if (dialogTitle.value === "添加") {
    adduser(FormParams.value).then((e) => {
      ElMessage({ type: "success", message: "添加成功" });
    });
  } else {
    edituser(FormParams.value).then((e) => {
      ElMessage({ type: "success", message: "修改成功" });
    });
  }
  getList();
  dialogFlag.value = false;
}

// 当前选中数据
const curronRow = ref({});
const detailFlag = ref(false);
function showDetail(obj) {
  curronRow.value = obj;
  detailFlag.value = true;
  dialogFlag.value = true;
}
</script>
